<template>
  <a-popover
    :visible="visible"
    :title="$t('deviceDetail.change')"
    trigger="click"
    placement="top"
    :destroyTooltipOnHide="true"
  >
    <template slot="content">
      <div class="contentWapper">
        <div class="leftWapper">
          <a-input :value="curOrder" :disabled="true" style="width: 70px" />
          <span class="exchangeWapper">
            {{ $t('deviceDetail.echange') }}
            <a-icon type="swap" style="font-size: 16px" />
          </span>
          <a-input
            :class="[error ? 'error' : '']"
            v-model="exchangeNum"
            :placeholder="$t('exportPdf.sno')"
            style="width: 70px"
          />
        </div>
        <div class="rightWapper">
          <a-button style="margin-right: 5px" @click="cancleClick">{{
            $t('deviceDetail.cancle')
          }}</a-button>
          <a-button type="primary" @click="changeOrder">{{
            $t('deviceDetail.comfirm')
          }}</a-button>
        </div>
      </div>
      <p class="errorHint" v-if="error">
        {{ errorHintTxt }}
      </p>
      <p class="remark">{{ $t('deviceDetail.rulematch') }}</p>
    </template>
    <a @click="showEditTableCell" class="orderNum">{{ curOrder }}</a>
  </a-popover>
</template>
<script>
export default {
  name: 'exchangeOrder',
  props: {
    curOrder: {
      type: Number,
    },
    maxOrder: {
      type: Number,
    },
  },

  data() {
    return {
      visible: false,
      exchangeNum: '',
      error: false,
      errorHintTxt: '',
      aceList: [],
    };
  },

  components: {},

  mounted() {},

  computed: {},
  watch: {
    visible(val) {
      if (!val) {
        this.exchangeNum = '';
      }
    },
  },

  methods: {
    showEditTableCell() {
      this.visible = !this.visible;
    },

    cancleClick() {
      this.visible = false;
    },

    async changeOrder() {
      const checkRes = this.checkNum();
      if (!checkRes) return;
      this.$emit('updateExchange', {
        curOrder: this.curOrder,
        exchangeOrder: this.exchangeNum,
      });
      this.visible = false;
    },

    checkNum() {
      if (this.exchangeNum == '') {
        this.error = true;
        this.errorHintTxt = this.$t('deviceDetail.exchangeso');
        return false;
      }
      if (!/^[0-9]*[1-9][0-9]*$/.test(this.exchangeNum)) {
        this.error = true;
        this.errorHintTxt = this.$t('deviceDetail.correctno');
        return false;
      } else if (parseInt(this.exchangeNum) > this.maxOrder) {
        this.error = true;
        this.errorHintTxt = `序号长度超出`;
        return false;
      } else if (this.exchangeNum == this.curOrder) {
        this.error = true;
        this.errorHintTxt = this.$t('deviceDetail.nochange');
      } else {
        this.error = false;
        return true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.contentWapper {
  width: 350px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.orderNum {
  text-decoration: none;
  border-bottom: 1px dashed #1da57a;
}
.remark {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
  margin-top: 5px;
}

.exchangeWapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
  font-size: 12px;
}
.leftWapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.error {
  border: 1px solid @colorRed;
}
.errorHint {
  color: @colorRed;
}
</style>
